<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <%@ include file="templates/header-css.jsp"%>
                <title>Order</title>
        </head>

        <body class="gray-bg">


            <!--Header-->
            <%@ include file="templates/navbar.jsp" %>

                <div class="mid-nav shadow-div">
                    <div class="row">
                        <div class="col-md-offset-1 col-md-10" style="margin-top:20px;">
                            <c:forEach var="order" items="${orders}">
                                <c:set value="0" var="sum" />
                                <table class="table-condensed">
                                   <c:choose>
                                       <c:when test="${order.oStatus == 1}">
                                           <tr class="bg-warning">
                                       </c:when>
                                       <c:when test="${order.oStatus == 2}">
                                           <tr class="bg-info">
                                       </c:when>
                                       <c:when test="${order.oStatus == 3}">
                                           <tr class="bg-success">
                                       </c:when>
                                       <c:when test="${order.oStatus == 4}">
                                           <tr class="bg-danger">
                                       </c:when>
                                       <c:otherwise>
                                        <tr style="background-color:#fcd844;">
                                       </c:otherwise>
                                   </c:choose>
                                        <td class="item-1-3 text-center">${order.merchant_name}</td>
                                        <td class="item-1-3 text-center">${order.date_msg}</td>
                                        <td class="item-1-3 text-center">${order.status_msg}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <ul class="list-group">
                                                <c:forEach var="food" items="${order.foodlist}">
                                                    <li class="list-group-item">
                                                        <div class="media">
                                                            <div class="media-left">
                                                                <a href="javascript:void(0);">
                                                                    <img class="img-responsive img-thumbnail media-object" src="${myPicServer}${food.fViewPath}" alt="placeholder" width="100" height="100">
                                                                </a>
                                                            </div>
                                                            <div class="media-body">
                                                                <h4 class="media-heading">${food.fName}</h4>
                                                                <h4 class="pull-left">x ${food.num}</h4>
                                                                <h4 class="pull-right">${food.fPrice}元</h4>
<!--                                                                <span class="hidden">${food.num*food.fPrice}</span>-->
                                                                <c:set value="${food.num*food.fPrice+sum}" var="sum" />
                                                            </div>
                                                        </div>
                                                    </li>
                                                </c:forEach>

                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" class="text-left">
                                            <div class="hidden" name="oid">${order.oId}</div>
                                            <c:if test="${order.oStatus == 3 && order.complaint == null}">
                                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#evalution_modal" data-oid="${order.oId}">
                                                    投诉
                                                </button>
                                            </c:if>
                                            <c:if test="${order.oStatus == 2}">
                                                <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#confirm_modal" data-oid="${order.oId}">确认收货</button>
                                            </c:if>
                                        </td>
                                        <td colspan="2" class="text-right" name="total">
                                            总价：${sum}元
                                        </td>
                                    </tr>
                                </table>
                                <hr>
                            </c:forEach>


                        </div>
                    </div>
                </div>

                <a href="#top">
                    <div class="top-box">
                        <span class="glyphicon glyphicon-chevron-up back-icon"></span>
                    </div>
                </a>

                <!-- 投诉模态框 -->
                <div class="modal fade" id="evalution_modal" tabindex="-1" role="dialog" aria-labelledby="evalution-title">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header gold-bg">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="evalution-title">投诉</h4>
                            </div>
                            <div class="modal-body">
                                <div class="hidden">oid</div>
                                <textarea class="form-control" rows="3" style="resize:none;" placeholder="投诉建议"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-common btn-block">提交</button>
                                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 确认收货模态框 -->
                <div class="modal fade" id="confirm_modal" tabindex="-1" role="dialog" aria-labelledby="confirm-title">
                    <div class="modal-dialog modal-sm" role="document">
                        <div class="modal-content">
                            <div class="modal-header gold-bg">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="confirm-title">确认收货</h4>
                            </div>
                            <div class="modal-body">
                                <div class="hidden">oid</div>
                                <span name="score">10 / 10分</span>
                                <span class="ratyli" data-rate="10" data-ratemax="10"></span>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-common btn-block">确认</button>
                                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>

                <footer>
                    <%@ include file="templates/footer.jsp"%>
                        <script type="text/javascript">
                            //评分样式、回调初始化
                            function init_score() {
                                $(".ratyli").replaceWith("<span class=\"ratyli\" data-rate=\"10\" data-ratemax=\"10\"></span>");
                                $(".ratyli").ratyli({
                                    full: "<i class='fa fa-star fa-lg'></i>",
                                    empty: "<i class='fa fa-star-o fa-lg'></i>",
                                    onRated: function (value, init) {
                                        // prevent run at init
                                        if (!init) {
                                            //更改分数数值
                                            $(this.el).prev().html(value + " / 10分");
                                        }
                                    },
                                });
                            }



                            //确认收货模态框初始化
                            function init_confirmModal() {
                                //确认收货模态框显示
                                $("#confirm_modal").on("show.bs.modal", function (event) {
                                    var button = $(event.relatedTarget);
                                    var oid = button.data("oid");
                                    var modal = $(this);
                                    modal.find(".modal-body .hidden").html(oid);
                                    init_score();
                                });

                                //确认收货模态框-提交
                                $("#confirm_modal .modal-footer button:first").unbind('click').click(function () {
                                    $.ajax({
                                        type: "POST",
                                        url: "${pageContext.request.contextPath}/action/confirmOrder",
                                        data: {
                                            oId: $("#confirm_modal").find(".modal-body .hidden").html(),
                                            mStark: $("#confirm_modal").find(".ratyli").attr("data-rate"),
                                        },
                                        success: function (data, status) {
                                            if (data.st === 1) {
                                                alert(data.msg);
                                                $('#confirm_modal').modal('hide');
                                                location.reload();
                                            } else {
                                                alert(data.msg);
                                            }

                                        },
                                        error: function () {
                                            alert("error!");
                                        }
                                    });
                                });
                            };

                            //移除投诉按钮
                            function removeComplaintBtn() {
                                $("[data-oid=" + $("#evalution_modal").find(".modal-body .hidden").html() + "]").remove();
                            }

                            //投诉框初始化
                            function init_evalModal() {
                                //投诉框显示
                                $("#evalution_modal").on("show.bs.modal", function (event) {
                                    var button = $(event.relatedTarget);
                                    var oid = button.data("oid");
                                    var modal = $(this);
                                    modal.find(".modal-body .hidden").html(oid);
                                });



                                //投诉模态框-提交
                                $("#evalution_modal .modal-footer button:first").unbind('click').click(function () {
                                    $.ajax({
                                        type: "POST",
                                        url: "${pageContext.request.contextPath}/action/complaintOrder",
                                        data: {
                                            oId: $("#evalution_modal").find(".modal-body .hidden").html(),
                                            complaint: $("#evalution_modal").find(".modal-body textarea").val()
                                        },
                                        success: function (data, status) {
                                            if (data.st === 1) {
                                                alert(data.msg);
                                                //移除投诉按钮
                                                removeComplaintBtn();
                                                $('#evalution_modal').modal('hide');
                                            } else {
                                                alert(data.msg);
                                            }
                                        },
                                        error: function () {
                                            alert("error!");
                                        }
                                    });
                                });
                            };
                            

                            $(document).ready(function () {
                                init_confirmModal();
                                init_evalModal();
                            });
                        </script>
                </footer>
        </body>

        </html>